<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://webapi.amap.com">
  <meta http-equiv="X-Content-Security-Policy" content="script-src 'self' https://webapi.amap.com"> -->

  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <style type="text/css">
    body,
    html,
    #app,
    #container {
      width: 100%;
      height: 100%;
      margin: 0px
    }
    #app{
      position: relative;
    }
    .menu{
      position: absolute;
      top: 10px;
      left: 100px;
      z-index: 999;
      display: flex;
    }
  </style>
    <script src="./vue/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./vue/element-ui.css">
    <!-- 引入组件库 -->
    <script src="./vue/element-ui.js"></script>
  <title>自动路径</title>
</head>

<body>
  <!-- <h1>Hello World!</h1>
  We are using Node.js <span id="node-version"></span>,
  Chromium <span id="chrome-version"></span>,
  and Electron <span id="electron-version"></span>. -->


  <div id="app">
    <div class="menu">
      <el-form :inline="true" :model="mapinfo" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="onSubmit">打开文件查询</el-button>
          <el-button type="primary" @click="reset">重置地图</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="container" tabindex="0"></div>
  </div>
  <!-- You can also require other files to run in this process -->

  <script src="https://webapi.amap.com/maps?v=1.4.15&key=26037173cebe0d06591b45f869560f4b&plugin=AMap.Driving&plugin=AMap.Autocomplete&plugin=AMap.PlaceSearch"></script>
  <script src="./renderer.js"></script>
  <script src="./coordtransform.js"></script>
</body>

</html>